<template>
  <main class="my-container">
    <div class="page-title">个人中心</div>
    <div class="user-page_bg"></div>
    <div class="user-bg"></div>
    <user-info />
    <nut-cell-group>
      <nut-cell
        :round-radius="index == 0 ? '6px 6px 0 0' : index + 1 == list.length ? '0 0 6px 6px' : '0'"
        :title="item.title"
        is-link
        v-for="(item, index) in list"
        :key="index"
        @click="itemClick(item)">
        <template v-slot:icon>
            <img
                size="5"
            class="nut-icon icon-small"
            :src="item.icon"
            />
            </template>
      </nut-cell>
    </nut-cell-group>
    <div class="user-login-box">
      <nut-button block plain type="primary" @click="loginOut">退出登录</nut-button>
    </div>
  </main>
</template>

<script lang="ts" setup>
import Taro from '@tarojs/taro'
import { computed, reactive } from 'vue'
import { useStore } from '@/stores'
import { login, openIdLogin } from '@/services/apis/user'
import { useLoad, useDidShow } from '@tarojs/taro'
import { Toast } from '@nutui/nutui'
const iconWchat = require('@/assets/icons/icon-wechat.svg')
const iconlogo = require('@/assets/icons/logo.png')

const userMsg = require('@/assets/icons/user-msg.png')
const userTips = require('@/assets/icons/user-tips.png')
const userSet = require('@/assets/icons/user-set.png')
const userUs = require('@/assets/icons/user-us.png')
const userPassword = require('@/assets/icons/user-password.png')

import UserInfo from './userInfo.vue'
const state = reactive({
  loginCode: 'system',
  password: 'fmzk1234',
  wxOpenid: '',
  checkbox: false
})
const auth = useStore('auth')
const isLogin = computed(() => auth.isLogin)

const loginOut = () => {
  Taro.setStorageSync('token', '')
  auth.logout()
  Taro.navigateTo({ url: `/pagesSub/login/index` })
}
useLoad(() => {
  // codeToLogin()
})
useDidShow(() => {
  state.wxOpenid = Taro.getStorageSync('openid')
})

const codeToLogin = () => {
  wx.login().then(data => {
    openIdLogin(data.code).then(data => {
      state.wxOpenid = data.openid
      Taro.setStorageSync('openid', data.openid)
      if (data.token) {
        Taro.setStorageSync('token', data.token)
        auth.setUserInfo({
          nickName: data.userName,
          avatarUrl: 'https://fmzk.harvest-code.com/api' + data.avatarUrl
        })
        auth.login()
      }
    })
  })
}
const handleLogin = () => {
  if (!state.checkbox) {
    wx.showToast({
      title: '请同意数据采集协议',
      icon: 'none',
      duration: 2000
    })
    return
  }
  login({
    loginCode: state.loginCode,
    password: state.password,
    wxOpenid: state.wxOpenid
  }).then(data => {
    if ((data.result = 'true' && data.token)) {
      Taro.setStorageSync('token', data.token)
      auth.setUserInfo({
        nickName: data.userName,
        avatarUrl: 'https://fmzk.harvest-code.com/api' + data.avatarUrl
      })
      auth.login()
    } else {
      wx.showToast({
        title: data.message,
        icon: 'none',
        duration: 2000
      })
    }
  })
}

const list = [
  { title: '消息列表', url: '/pagesSub/my/msg/index',icon: userMsg},
  { title: '墒情报警设置', url: '/pagesSub/my/set/sqyj/index',icon: userTips },
  { title: '虫情报警设置', url: '/pagesSub/my/set/cqyj/index',icon: userSet},
  // { title: '气象报警设置', url: '/pagesSub/my/set/index?type=2' },
  { title: '关于我们', url: '/pagesSub/my/about/index',icon: userUs },
  { title: '修改密码', url: '/pagesSub/my/changepwd/index',icon: userPassword }
]
const itemClick = item => {
  if (item.url) {
    Taro.navigateTo({ url: `${item.url}` })
  }
}
</script>

<style lang="scss">
@import '@/assets/styles/index.scss';
.nut-placeholder {
  color: #fff;
}
.user-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 210px;
  background: url(../../assets/icons/login-top-bg.png) no-repeat;
  background-size: 100% auto;
  z-index: 0;
}


.user-page_bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: #f6f6f6;
  z-index: 0;
}
.my-container {
  padding: 90px 10px 0 10px;
  .nut-cell-group__warp {
    margin: 0 10px;
    display: block;
    border-radius: 12rpx;
    overflow: hidden;
    background: #fff;
  }
  .nut-cell {
    padding: 17px 15px 17px 20px ;
  }
  .nut-cell__link.nut-icon {
    font-size: 12px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.3);
  }
}
.user-login-box {
  position: relative;
  padding: 30px 30px 0 30px;
  text-align: center;
  p {
    line-height: 20px;
    font-size: $font-size-1;
    color: #fff;
  }
}
.user-login_bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background-image: url('https://osscdn.harvest-code.com/static/m01bs30jq.png');
  background-size: 100%;
  z-index: 0;
}
.user-login-main {
  padding: 0 20px;
}
.user-login-logo {
  position: relative;
  margin-top: 40px;
  height: 160px;
  text-align: center;
  overflow: hidden;
  text-align: center;
  color: #fff;
}
.user-login-page {
  .nut-input {
    background: none;
    color: #fff;
    .input-text {
      color: #fff;
    }
    .input-text::placeholder {
      color: #fff;
      -webkit-text-fill-color: #fff;
    }
  }
}
.user-login-bottom {
  position: relative;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  color: #fff;
  font-size: $font-size-1;
  z-index: 10;
  .nut-checkbox {
    display: flex;
    margin-right: 20px;
    .nut-checkbox__label {
      margin-left: 10px;
      color: #fff;
    }
  }
}
.page-title{
    position: relative;
    margin-top: -32px;
    font-size: 18px;
    z-index: 100;
    text-align: center;
}
.nut-cell__icon .icon-small{
    margin-top: 5px;
    width: 10px;
    height: 10px;
}

</style>
